<template>
  <div class="com-sidebar-nav">
    <div class="title">VueUI-Widgets 组件列表</div>
    <ul>
      <li v-for="(value, key) in routeComponents" :key="key">
        <router-link :to="key">{{key}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import { routeComponents } from '../router'
export default {
  data() {
    return {
      routeComponents
    }
  }
}
</script>
<style lang="less">
.com-sidebar-nav {
  padding-bottom: 30px;
  .title {
    padding: 0 12px;
    line-height: 48px;
    font-size: 15px;
    color: #1c2438;
    font-weight: bold;
  }
  ul {
    li {
      list-style: none;
      line-height: 36px;
      a {
        display: block;
        padding: 0 12px;
        font-size: 14px;
        &:hover {
          background-color: #f7f7f7;
        }
        &.router-link-active {
          background-color: #2d8cf0;
          color: #fff;
        }
      }
    }
  }
}
</style>